<template>
  <div class="waterfall">
    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">基本信息</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="应用名" prop="product_name">
          <el-input v-model="form.product_name" placeholder="请输入应用名" />
        </el-form-item>
        <el-form-item label="AppId" prop="appid">
          <el-input v-model="form.appid" placeholder="请输入AppId" />
        </el-form-item>
        <el-form-item label="包名" prop="package_name">
          <el-input v-model="form.package_name" placeholder="请输入包名" />
        </el-form-item>
        <el-form-item label="用户协议地址" prop="privacy_url">
          <el-input v-model="form.privacy_url" placeholder="请输入用户协议地址" />
        </el-form-item>
        <el-form-item label="是否允许IOS用户充值" prop="is_ios_recharge">
          <el-switch v-model="form.is_ios_recharge" />
          <p class="fon-12 font-color-2">一般情况下打开，当被微信查到IOS支付违规时请关闭</p>
        </el-form-item>
        <el-form-item label="是否开启回传状态" prop="is_return">
          <el-switch v-model="form.is_return" />
        </el-form-item>
      </el-form>
    </div>

    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">退出播放引导订阅弹窗配置</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="弹窗开关" prop="quit_box_switch">
          <el-switch v-model="form.quit_box_switch" />
        </el-form-item>
        <el-form-item label="弹窗标题" prop="quit_box_title">
          <el-input v-model="form.quit_box_title" placeholder="请输入弹窗标题" />
        </el-form-item>
        <el-form-item label="弹窗内容" prop="quit_box_content">
          <el-input v-model="form.quit_box_content" placeholder="请输入弹窗内容" />
        </el-form-item>
        <el-form-item label="按钮" prop="quit_box_btn">
          <el-input v-model="form.quit_box_btn" placeholder="请输入按钮文案（加入追剧）" />
        </el-form-item>
      </el-form>
    </div>

    <div class="item">
      <div class="title-panel">
        <p class="font-16 font-bold">功能配置</p>
        <el-button type="success" @click="handleSubmit">保存</el-button>
      </div>
      <el-form ref="formInfoRef" :model="form" :rules="rules" label-width="150px" size="small">
        <el-form-item label="剧集价格开关" prop="episode_price_switch">
          <el-switch v-model="form.episode_price_switch" />
        </el-form-item>
      </el-form>
    </div>

  </div>

</template>

<script>
import { addApp, editApp, queryInfoMp } from '@/api/miniProgram/app'

export default {
  name: 'AppAdd',
  data() {
    return {
      // 表单参数
      form: {
        product_name: undefined,
        appid: undefined,
        package_name: undefined,
        privacy_url: undefined,
        is_audit: undefined,
        is_ios_recharge: undefined,
        is_return: undefined,

        quit_box_switch: undefined, // 退出播放，追剧弹窗
        quit_box_title: undefined, // 退出播放，追剧弹窗
        quit_box_content: undefined, // 退出播放，弹窗内容
        quit_box_btn: undefined, // 退出播放，弹窗按钮文案

        episode_price_switch: undefined // 剧集价格
      },
      // 表单校验
      rules: {
        product_name: [
          { required: true, message: '请输入应用名', trigger: ['blur', 'change'] }
        ],
        appid: [
          { required: true, message: '请输入AppId', trigger: ['blur', 'change'] }
        ],
        package_name: [
          { required: true, message: '请输入包名', trigger: ['blur', 'change'] }
        ]
      },
      detailId: ''
    }
  },
  created() {
    this.detailId = this.$route.query.id || ''

    if (this.detailId) {
      this.queryDetailFn()
    }
  },
  methods: {
    async queryDetailFn() {
      this.reset()

      const res = await queryInfoMp({
        product_id: this.detailId
      })
      const { is_audit, is_ios_recharge, is_return, quit_box_switch, episode_price_switch } = res
      res.is_audit = is_audit == 1
      res.is_ios_recharge = is_ios_recharge == 1
      res.is_return = is_return == 1
      res.quit_box_switch = quit_box_switch == 1
      res.episode_price_switch = episode_price_switch == 1

      this.form = res
    },

    // 表单重置
    reset() {
      this.form = {
        product_name: undefined,
        appid: undefined,
        package_name: undefined,
        privacy_url: undefined,
        is_audit: undefined,
        is_ios_recharge: undefined,
        is_return: undefined,

        quit_box_switch: undefined, // 退出播放，追剧弹窗
        quit_box_title: undefined, // 退出播放，追剧弹窗
        quit_box_content: undefined, // 退出播放，弹窗内容
        quit_box_btn: undefined, // 退出播放，弹窗按钮文案

        episode_price_switch: undefined // 剧集价格
      }
      this.resetForm('formInfoRef')
    },

    /** 保存按钮操作 */
    handleSubmit() {
      this.$refs['formInfoRef'].validate((valid) => {
        if (valid) {
          this.form.is_audit = this.form.is_audit ? 1 : 2
          this.form.is_ios_recharge = this.form.is_ios_recharge ? 1 : 2
          this.form.is_return = this.form.is_return ? 1 : 2
          this.form.quit_box_switch = this.form.quit_box_switch ? 1 : 0
          this.form.episode_price_switch = this.form.episode_price_switch ? 1 : 0

          if (this.detailId) {
            editApp(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.handleBack()
            })
          } else {
            addApp(this.form).then(res => {
              this.$modal.msgSuccess('添加成功')
              this.handleBack()
            })
          }
        }
      })
    },
    async handleBack() {
      await this.$tab.closePage({
        path: '/miniProgram/app/add', name: 'AppAdd'
      })
      await this.$tab.refreshPage({ path: '/miniProgram/app/list', name: 'AppList' })
      await this.$tab.openPage('应用列表', '/miniProgram/app/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.waterfall {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);  // 指定两列，自动宽度
  grid-gap: 20px; // 横向，纵向间隔
  grid-auto-flow: row dense;  // 是否自动补齐空白
  grid-auto-rows: 20px;  // base高度，grid-row基于此运算
  .item {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
  }

  //.item:nth-of-type(3n+1) {
  //  grid-row: auto / span 10;
  //}
  //.item:nth-of-type(3n+2) {
  //  grid-row: auto / span 6;
  //}
  //.item:nth-of-type(3n+3) {
  //  grid-row: auto / span 8;
  //}
  .item:nth-child(1) {
    grid-row: auto / span 12;
  }
  .item:nth-child(2) {
    grid-row: auto / span 8;
  }
  .item:nth-child(3) {
    grid-row: auto / span 4;
  }
  .item:nth-child(4) {
    grid-row: auto / span 10;
  }
  .item:nth-child(5) {
    grid-row: auto / span 12;
  }

  .title-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

}
@media (max-width: 768px) {
  .waterfall {
    grid-template-columns: repeat(1, 1fr);  // 指定两列，自动宽度
    .item:nth-child(1) {
      grid-row: auto / span 16;
    }
  }
}

//
//.waterfall {
//  padding: 20px;
//  display: flex;
//  justify-content: space-between;
//  flex-wrap: wrap;
//  .item {
//    width: 48%;
//    border: 1px solid #ccc;
//    border-radius: 4px;
//    margin-bottom: 20px;
//    padding: 20px;
//  }
//}
//
//.title-panel {
//  display: flex;
//  align-items: center;
//  justify-content: space-between;
//  margin-bottom: 20px;
//}
//
//@media (max-width: 768px) {
//  .waterfall {
//    .item {
//      width: 100%;
//    }
//  }
//}
</style>
